<template>
  <div class="cash cash_t_common cash_t_brief">
    <div class="tips tips-border">
      <div class="tips_tit pb">操作提示</div>
      <div class="tips_txt">订单总金额 = 订单支付总金额 + 商户优惠券抵扣金额 + 平台优惠券抵扣金额 + 订单积分抵扣金额 + 运费金额</div>
      <div class="tips_txt">商户结算金额 = 订单总金额 - 平台抽成金额 - 分销佣金 - 商户优惠券抵扣金额</div>
      <div class="tips_txt">商户实际结算金额 = 商户结算金额 - 商户退款金额</div>
      <div class="tips_txt">平台抽成金额 = （订单总金额 - 运费金额 - 平台优惠券抵扣金额 - 订单积分抵扣金额） * 平台抽成百分比</div>
      <div class="tips_txt">平台实际抽成金额 = 平台抽成金额 - 平台退款金额</div>
      <div class="tips_txt">分销佣金 = （订单支付总金额） * 佣金百分比</div>
      <div class="tips_txt">实际分销佣金 = （订单支付总金额 - 退款金额） * 佣金百分比</div>
    </div>
    <div class="cash-header">
      <div>
        <span class="cash_t_title1">商户名称 :{{dataModel.name}}</span>
      </div>
    </div>
    <div class="cash-header">
      <div>
        <span class="cash_t_title">商户结算</span>
        <span >    账期时间: {{searchForm.createTime[0]}} 至 {{searchForm.createTime[1]}}</span>
      </div>
    </div>
    <div class="cash-body">
      <div class="content">
        <p class="title">订单总金额(不含优惠折扣)(元)</p>
        <p class="money">{{dataModel.totalPrice}}</p>
      </div>
      <div class="content">
        <p class="title">运费金额(元)</p>
        <p class="money">{{dataModel.expressMoney}}</p>
      </div>
      <div class="content">
        <p class="title">订单支付总金额(元)</p>
        <p class="money">{{dataModel.orderMoney}}</p>
      </div>
      <div class="content">
        <p class="title">商户结算金额(元)</p>
        <p class="money">{{dataModel.supplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">商户退款金额(元)</p>
        <p class="money">{{dataModel.refundSupplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">商户实际结算金额(元)</p>
        <p class="money">{{dataModel.realSupplierMoney}}</p>
      </div>
      <div class="content">
        <p class="title">平台抽成金额(元)</p>
        <p class="money">{{dataModel.sysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">平台退款金额(元)</p>
        <p class="money">{{dataModel.refundSysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">平台实际抽成金额(元)</p>
        <p class="money">{{dataModel.realSysMoney}}</p>
      </div>
      <div class="content">
        <p class="title">分销佣金(元)</p>
        <p class="money">{{dataModel.agentMoney}}</p>
      </div>
      <div class="content">
        <p class="title">实际分销佣金(元)</p>
        <p class="money">{{dataModel.realAgentMoney}}</p>
      </div>
      <div class="content">
        <p class="title">退款金额(元)</p>
        <p class="money">{{dataModel.refundMoney}}</p>
      </div>
      <div class="content">
        <p class="title">商户优惠券抵扣金额(元)</p>
        <p class="money">{{dataModel.couponMoney}}</p>
      </div>
      <div class="content">
        <p class="title">平台优惠券抵扣金额(元)</p>
        <p class="money">{{dataModel.couponMoneySys}}</p>
      </div>
      <div class="content">
        <p class="title">订单积分抵扣金额(元)</p>
        <p class="money">{{dataModel.pointsMoney}}</p>
      </div>
    </div>
  </div>


  <div class="ww100 mt30">
    <!--表格-->
    <div class="product-content">
      <div class="table-wrap">
        <el-table size="small" :data="tableData" border style="width: 100%" v-loading="loading">
          <el-table-column prop="orderNo" label="订单号" ></el-table-column>
          <el-table-column prop="payMoney" label="支付金额" ></el-table-column>
          <el-table-column prop="orderMoney" label="订单金额(不含运费)"></el-table-column>
          <el-table-column prop="realSupplierMoney" label="商户实际结算金额"></el-table-column>
          <el-table-column prop="realSysMoney" label="平台实际抽成金额"></el-table-column>
          <el-table-column prop="agentMoney" label="分销佣金"></el-table-column>
          <el-table-column prop="refundMoney" label="退款金额"></el-table-column>
          <el-table-column prop="couponMoney" label="商户优惠券抵扣金额"></el-table-column>
          <el-table-column prop="couponMoneySys" label="平台优惠券抵扣"></el-table-column>
          <el-table-column prop="pointsMoney" label="积分抵扣金额"></el-table-column>
          <el-table-column prop="createTime" label="添加时间" ></el-table-column>
        </el-table>
      </div>

      <!--分页-->
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background :current-page="curPage"
                       :page-size="pageSize" layout="total, prev, pager, next, jumper"
                       :total="totalDataNumber">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
import SupplierApi from '@/api/supplier.js';
import { formatDate } from '@/utils/DateTime.js'
export default {
  components: {},
  data() {
    return {
      /*是否加载完成*/
      loading: true,
      /*列表数据*/
      tableData: [],
      dataModel: {

      },
      /*一页多少条*/
      pageSize: 20,
      /*一共多少条数据*/
      totalDataNumber: 0,
      /*当前是第几页*/
      curPage: 1,
      /*横向表单数据模型*/
      formInline: {
        supplierId: null
      },
      searchForm: {
        createTime: []
      },
      supplierList: [],
      /*是否打开添加弹窗*/
      open_add: false,
      /*是否打开编辑弹窗*/
      open_edit: false,
      /*当前编辑的对象*/
      userModel: {},
      logoImgs: [],
      businessImgs: [],
    };
  },
  created() {
    /*获取列表*/
    this.getParams();
  },
  methods: {
    next() {
      if (this.active++ > 4) this.active = 0;
    },
    /*获取参数*/
    getParams() {
      let self = this;
      // 取到路由带过来的参数
      const params = this.$route.query;
      self.searchForm.createTime[0] = params.startDate;
      self.searchForm.createTime[1] = params.endDate;
      SupplierApi.dataDetail(params, true)
          .then(res => {
            self.loading = false;
            self.tableData = res.data.orderList.records;
            self.totalDataNumber = res.data.orderList.total;
            self.dataModel = res.data.tjData;
          })
          .catch(error => {
            self.loading = false;
          });
    },

    /*选择第几页*/
    handleCurrentChange(val) {
      let self = this;
      self.curPage = val;
      self.loading = true;
      self.getTableList();
    },

    /*每页多少条*/
    handleSizeChange(val) {
      this.curPage = 1;
      this.pageSize = val;
      this.getTableList();
    },

    /*搜索查询*/
    onSubmit() {
      this.curPage = 1;
      this.getTableList();
    },

  }
};
</script>

<style>
.apply-container {
  padding: 50px 0;
}

.cash {
  background-color: #fff;
  font: 14px;
}
.tips-border{
  border: 1px solid #CACACA;
  padding: 15px;
  margin-bottom: 20px;
}
.tips_tit{
  font-size: 22px;
  margin-bottom: 10px;
}
.tips_txt{
  line-height: 25px;
  color: #666;
  font-size: 14px;
}
.cash_t_common {
  margin-top: 15px;
  margin-bottom: 0;
  box-shadow: initial;

.cash_t_title {
  font-size: 15px;
  font-weight: 600;
}
.cash_t_title1 {
  font-size: 12px;
  font-weight: 600;
}

.cash-header {
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
}

.cash_t_brief .cash-header {
  border-bottom: 0;
  padding-bottom: 0;
}

.cash-header {
  position: relative;
  height: 42px;
  line-height: 42px;
  padding: 0 15px;
  border-bottom: 1px solid #f6f6f6;
  color: #333;
  border-radius: 2px 2px 0 0;
  font-size: 14px;
}

.cash_t_brief .cash_t_title {
  position: relative;
  padding-left: 10px;
}

.cash_t_brief .cash_t_title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 14px;
  background-color: #3a8ee6;
  position: absolute;
  left: 0;
  top: 50%;
  border-radius: 5px;
  transform: translateY(-50%);
}

.cash_t_common .cash-body {
  padding: 20px;
}

.cash-body {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 0 !important;
  padding-right: 50px !important;
  padding-left: 50px !important;
  flex-wrap: wrap;
  position: relative;
  padding: 10px 15px;
  line-height: 24px;

.content {
  width: 33.3%;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  justify-content: center;
}

.content {
  width: 33.3%;
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  justify-content: center;
}

.money {
  font-size: 20px;
  color: #666;
  font-weight: bold;
  margin-top: 10px;
  max-width: 250px;
}

.subhead {
  font-size: 12px;
  margin-left: 3px;
  cursor: pointer;
}
}

.ns-text-color {
  color: #3a8ee6;
}

.date_section {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
